<template>
  <div class="skipTime-box">
    <a :href="advUrl"><img :src="imgs.skipTimeImg" alt=""></a>
    <span class="btn skip positionA" @click="clearTime();$router.push('/home')">跳过({{advTime}}s)</span>
  </div>
</template>

<script>
export default {
  name: 'skipTime',
  data () {
    return {
     imgs:{
       skipTimeImg:"http://img.zcool.cn/community/01567557e748840000012e7e5c3c4d.gif"
     },
     advUrl:"",  //广告的超链接
     advTime:25,  //广告时间
     timeSet:null,//定时器
     useTimeSet:false, //是否启用定时器
    }
  },
  methods:{
    autoGoto(){
      this.timeSet=setInterval(()=>{
        if(this.advTime!==0){
          this.advTime--
        }else{
          clearInterval(this.timeSet)
          if(this.useTimeSet)this.$router.push('/home')
        }
      },1000)
    },
    clearTime(){
      clearInterval(this.timeSet)
    }
  },
  mounted(){
    this.autoGoto()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  img{
    width: 100%;
  }
  span.skip{
    top: 5px;
    right: 5px;
    font-size: 14px;
  }
</style>
